$(document).ready(function() {
  if (!("WebSocket" in window)) {
    alert("no websocket");
    return;
  }
  
  IMAGE = new Image();
  IMAGE.src = "tankbrigade-t.png";
  var stage = new Stage(document.getElementById('screen'));

  var collisionManager = new CollisionManager();

  var p1 = new Tank(36, 350, 'p1', collisionManager);
  var p2 = new Tank(100, 350, 'p2', collisionManager);
  var tanks = [p1, p2];
  var blocks = [];
  var tiles = [];

  for (var i = 1; i < 13; i++) {
    for (var j = 1; j < 13; j++) {
      if (window['BLOCK_TYPE_' + i + '_' + j]) {
        blocks.push(new Block(window['BLOCK_TYPE_' + i + '_' + j], 32 * i, 32 * j, collisionManager));
      }
    }
  }
  for (i = 1; i < 13; i++) {
    for (j = 1; j < 13; j++) {
      if (window['TILE_TYPE_' + i + '_' + j]) {
        tiles.push(new Tile(window['TILE_TYPE_' + i + '_' + j], 32 * i, 32 * j, collisionManager));
      }
    }
  }

  stage.addScene({
    init: function() {
    },
    update: function() {
      var arr1 = [KEY_W, KEY_D, KEY_S, KEY_A];
      arr1.sort(function(a, b) {
        return stage.keymap[a] - stage.keymap[b];
      });
      if (stage.keymap[arr1[3]] > 0) {
        switch (arr1[3]) {
          case KEY_W:
            p1.moveUp();
            break;
          case KEY_D:
            p1.moveRight();
            break;
          case KEY_S:
            p1.moveDown();
            break;
          case KEY_A:
            p1.moveLeft();
            break;
        }
      } else {
        p1.stop();
      }

      var arr2 = [KEY_UP, KEY_RIGHT, KEY_DOWN, KEY_LEFT];
      arr2.sort(function(a, b) {
        return stage.keymap[a] - stage.keymap[b];
      });
      if (stage.keymap[arr2[3]] > 0) {
        switch (arr2[3]) {
          case KEY_UP:
            p2.moveUp();
            break;
          case KEY_RIGHT:
            p2.moveRight();
            break;
          case KEY_DOWN:
            p2.moveDown();
            break;
          case KEY_LEFT:
            p2.moveLeft();
            break;
        }
      } else {
        p2.stop();
      }
      collisionManager.update();
      for (var i = 0; i < tanks.length; i++) {
        tanks[i].update();
      }
      for (i = 0; i < blocks.length; i++) {
        var block = blocks[i];
        block.update();
      }
      collisionManager.clean();
    },
    render: function(context) {
      for (var i = 0; i < tiles.length; i++) {
        tiles[i].render(context);
      }
      for (i = 0; i < tanks.length; i++) {
        tanks[i].render(context);
      }
      for (i = 0; i < blocks.length; i++) {
        blocks[i].render(context);
      }
    },
    keypress: function(key) {
      switch (key) {
        case KEY_FIRE_1:
          p1.fire();
          break;
        case KEY_FIRE_2:
          p2.fire();
          break;
      }
    }
  });

  $('#screen').attr('width', STAGE_MAX_X).attr('height', STAGE_MAX_Y).focus();
  stage.start();
  
  connect();

  function connect() {
    console.log("connecting");
    try {
     var socket = new WebSocket("ws://localhost:8080/tanke/websocket");

      socket.onopen = function() {
        console.log("open");
      }

      socket.onmessage = function(msg) {
        console.log("message");
      }

      socket.onclose = function() {
        console.log("close");
      }

    } catch (exception) {
      console.log(exception);
    }

  }
});